<template>
  <div class="app-sidebar" :style="sidebarHeight">
    <div class="app-sidebar-top" :style="{height:topHeight + 'px', lineHeight:topHeight + 'px'}">
      <div class="app-sidebar-avatar">
        <img :src="sidebarAvatar">
      </div>
      <div class="app-avatar-detail">
        <div class="app-sidebar-name">{{ sidebarName }}</div>
        <div class="app-sidebar-position">{{ sidebarPosition }}</div>
      </div>
    </div>
    <el-row class="tac">
      <el-menu :default-active="sidebarActive" class="app-sidebar-vertical" @open="handleOpen" @close="handleClose" :router="menuRouter" :unique-opened="menuUniqueOpen" background-color="#20222A">
        <template v-for="(item, index) in menuConfig">
          <!-- 此处的index需显示转换为string，否则会报warn -->
          <template v-if="item.submenu.length">
            <el-submenu :index="'' + (index + 1)" :key="index">
              <template slot="title">
                <span class="iconfont" :class="item.icon | iconClass"></span>
                {{ item.name }}
              </template>
              <template v-for="(subItem, i) in item.submenu">
                <!-- 此处index格式为父级的index加上下划线加上当前的index，index都需加1 -->
                <router-link tag="span" :to="subItem.url" :key="i">
                  <el-menu-item :index="subItem.ename">{{ subItem.name }}</el-menu-item>
                </router-link>
              </template>
            </el-submenu>
          </template>
          <!-- 没有二级菜单的情况 -->
          <template v-else>
            <router-link tag="span" :to="item.url" :key="index">
              <el-menu-item :index="item.ename">
                <span class="iconfont" :class="item.icon | iconClass"></span>
                {{ item.name }}
              </el-menu-item>
            </router-link>
          </template>
        </template>
      </el-menu>
    </el-row>
  </div>
</template>

<script>
// import config from '../../config'

export default {
  name: 'appSideBar',
  data () {
    return {
      menuPromise: {}, // 暂存promise
      menuConfig: [],
      menuRouter: false,
      menuUniqueOpen: true,
      sidebarAvatar: './images/avatar.png',
      sidebarName: '',
      sidebarPosition: '',
      sidebarActive: '',
      topHeight: this.$base.getConst('common', 'headerHeight')
    }
  },
  mounted () {
    let userInfo = this.$base.getSessionStorage('userInfo')
    if (userInfo) {
      userInfo = JSON.parse(userInfo)
      this.sidebarName = userInfo.userName || userInfo.userId || ''
      this.sidebarPosition = userInfo.roleName || ''
      this.sidebarAvatar = userInfo.filePath || './images/avatar.png'
    }
  },
  computed: {
    sidebarHeight () {
      let h = this.$base.getDocumentHeight()
      return 'height:' + h + 'px'
    }
  },
  methods: {
    handleOpen: function () {
    },
    handleClose: function () {

    },
    findDifference (arr, val) {
      let bool = true
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i]
        if (!item.submenu.length) {
          if (item.ename.toLowerCase() === val.toLowerCase()) {
            bool = false
          }
        } else {
          for (let j = 0; j < item.submenu.length; j++) {
            if (item.submenu[j].ename.toLowerCase() === val.toLowerCase()) {
              bool = false
            }
          }
        }
      }
      return bool
    }
  },
  filters: {
    iconClass: function (value) {
      if (!value) return ''
      value = value.toString()
      return 'icon-' + value
    }
  },
  watch: {
    '$route' (to) {
      // 对路由变化作出响应...
      // 如果侧边栏为空则发出请求，否则不请求
      if (this.menuConfig.length === 0) {
        const url = this.$base.getUrl('getUserMenuTree')
        let params = {
          url: url,
          data: {}
        }
        this.$store.dispatch('postForm', params).then(res => {
          if (res.code === 0) {
            const { result } = res
            let userInfo = JSON.parse(this.$base.getSessionStorage('userInfo'))
            if (userInfo.userRole !== 1 && userInfo.chargeMenuFlag === '1') {
              result.shift()
            }
            result.map(item => {
              if (item.menuId === 6) {
                item.submenu = item.submenu.filter(submenu => submenu.menuId !== 7)
              }
            })
            this.menuConfig = result
            // 如果有不同
            if (this.findDifference(this.menuConfig, to.meta.moduleName)) {
              this.$router.replace('/404')
            }
          }
        })
      } else {
        // 如果有不同
        if (this.findDifference(this.menuConfig, to.meta.moduleName)) {
          this.$router.replace('/404')
        }
      }
      this.sidebarActive = to.meta.moduleName
    }
  }
}
</script>

<style>
.app-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  /*z-index: 1;*/
  width: 180px;
  background-color: #20222a;
}

.app-sidebar-vertical {
  text-align: left;
}

.app-sidebar .el-menu {
  border-right: none;
}

.app-sidebar .iconfont {
  vertical-align: middle;
  margin-right: 15px;
  width: 24px;
  text-align: center;
  font-size: 18px;
}

.app-sidebar .el-menu-item,
.app-sidebar .el-submenu__title {
  height: 40px;
  line-height: 40px;
}

.app-sidebar .el-menu-item {
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.75);
}

.app-sidebar .el-menu--inline .el-menu-item {
  padding: 0 15px 0 53px !important;
}

.app-sidebar .el-menu-item-group .el-menu-item {
  background-color: #191b21;
}

.app-sidebar .el-menu-item.is-active {
  color: #fff;
}

.app-sidebar .el-submenu__title,
.app-sidebar .el-submenu__title i {
  color: rgba(255, 255, 255, 0.75);
}

.app-sidebar .is-opened .el-submenu__title {
  /*background-color: #111!important;*/
}

.app-sidebar .is-opened .el-submenu__title,
.app-sidebar .is-opened .el-submenu__title i {
  color: #fff;
}

.app-sidebar .router-link-active .el-menu-item {
  color: #fff;
  background-color: #1a1b22 !important;
}

.app-sidebar .el-submenu .el-menu-item {
  min-width: 180px;
}

.app-sidebar-top {
  font-size: 0;
  padding: 0 15px;
  /*height: 50px;*/
  /*line-height: 50px;*/
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 1px;
  background-color: #111;
  text-align: left;
}

.app-sidebar-top div {
  display: inline-block;
  font-size: 14px;
  color: #fff;
}

.app-sidebar-avatar {
  position: relative;
  top: 10px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 100%;
  margin-right: 7px;
}

.app-sidebar-avatar img {
  width: 100%;
}

.app-sidebar-name {
  margin: 4px 0 0 6px;
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 14px;
}

.app-sidebar-position {
  margin-top: 2px;
  font-size: 12px;
  line-height: 12px;
  padding: 2px 6px;
  border-radius: 20px;
  background-color: #ff6600;
}

.app-avatar-detail {
  position: absolute;
  top: 6px;
  left: 60px;
  z-index: 10;
  line-height: 16px;
}
</style>
